<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import {v4 as uuidv4} from 'uuid';
const uploadRef = ref();
const formdata = ref({
  username: '',
  password: '',
  userTouxiang:'',
  phone: '',
  merchantName: '',
  touxiang:'',
  merchantIntroduction: '',
  bg: '',
  position: '',
  applyTime:  '',
});

const resetForm = () => {
  formdata.value = {
    username: '',
    password: '',
    userTouxiang:'',
    phone: '',
    merchantName: '',
    touxiang:'',
    merchantIntroduction: '',
    bg: '',
    position: '',
    applyTime:  '',
  };
  if(uploadRef.value){
    (uploadRef.value as any).clearFiles();
  }
};
const handleSubmit = () => {
  uploadRef.value.submit();
};
const handleUploadSuccess = (response: any) => {
  formdata.value.userTouxiang = response.msg;
  axios.post('http://localhost:8080/user/register',formdata.value).then(res=>{
  })
};
const handleUploadError = (error: any) => {
  console.log(error);
};
</script>
<template>
  <div class="register-container">
    <el-card class="register-card" shadow="hover">
      <h1>商家入驻</h1>
      <el-form :model="formdata" ref="registerForm" label-width="100px">
        <el-form-item label="账号" prop="username">
          <el-input v-model="formdata.username" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formdata.password" type="password" placeholder="请输入密码" clearable />
        </el-form-item>
        <el-form-item label="用户头像" prop="userTouxiang">
          <el-upload
              ref="uploadRef"
              class="upload-demo"
              drag
              :auto-upload="false"
              :limit="1"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
              action='http://localhost:8080/user/uploadusertouxiang'
              multiple>
            <el-icon class="el-icon--upload"><upload-filled/></el-icon>
            <div class="el-upload__text">
              拖拽头像至此<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                图片大小小于500kb
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formdata.phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="商家名称" prop="merchantName">
          <el-input v-model="formdata.merchantName" placeholder="请输入商家名称" clearable />
        </el-form-item>
        <el-form-item label="商家介绍" prop="merchantIntroduction">
          <el-input
              type="textarea"
              v-model="formdata.merchantIntroduction"
              placeholder="请输入商家介绍"
              rows="3"
          />
        </el-form-item>
        <el-form-item label="商铺头像链接" prop="touxiang">
          <el-input v-model="formdata.touxiang" placeholder="请输入头像链接" clearable />
        </el-form-item>
        <el-form-item label="背景图片链接" prop="bg">
          <el-input v-model="formdata.bg" placeholder="请输入背景图片链接" clearable />
        </el-form-item>
        <el-form-item label="位置" prop="position">
          <el-input v-model="formdata.position" placeholder="请输入位置" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button type="default" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.register-container {
  max-width: 600px;
  margin: 50px auto;
}
.register-card {
  padding: 20px;
}
</style>